<template>
  <!-- 输出数据源 -->
  <div class="rule-box">
    <div v-if="$route.query.name" class="back-title">
      <i class="el-icon-arrow-left" @click="$router.go(-1)">返回</i>
    </div>
    <div class="app-container hk-flex-column">
      <div class="app-container-bg">
        <datasourceTypeItem :data="tabs" @handleClick="handleClick" />
      </div>
      <syslog :id="id" :source-type="tabType" :data-type="tabs" @changeOpen="getList" @updateData="getList" />
    </div>
  </div>
</template>

<script>
import datasourceTypeItem from '../../components/datasource/TypeItem'
import syslog from '../../components/datasource/Syslog'
import Kafka from '../../components/datasource//Kafka'
import Jdbc from '../../components/datasource//Jdbc'
import { getSourceList } from '@/api/milkyway/repositorypage'

export default {
  name: 'RepositionPage',
  components: { syslog, Kafka, Jdbc, datasourceTypeItem },
  data() {
    return {
      tabType: '',
      tabs: [],
      id: ''
    }
  },
  created() {},
  mounted() {
    this.getList()
  },
  methods: {
    // 点击事件
    handleClick(index) {
      if (index == 0) {
        this.tabType = ''
        this.id = null
      } else {
        this.tabType = this.tabs[index - 1].keyValue
        this.id = this.tabs[index - 1].id
      }
    },
    // 获取事件
    getList() {
      getSourceList({ type: 1 }).then((res) => {
        this.tabs = res
        this.id = res[0].id
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@mixin hk-flex {
  display: flex;
  justify-content: center;
}

//重定义样式
.app-container {
  width:100% !important;
  padding:0;
  overflow: hidden !important;
  background:#eef0f5 !important;
  &.hk-flex {
    padding: 0;
    @include hk-flex;
    align-items: stretch;
    height: 100%;
    overflow: auto;
    background: #eef0f5;
  }

  .card-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 20px;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    cursor: pointer;
  }
  .active {
    border-color: #4b6eef;
    background: #edf0fd;
  }
  .card-num {
    color: #2979ff;
  }
}
::v-deep {
  .el-dialog__body {
    height: auto !important;
  }
}
</style>
